import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput, Button, Alert} from 'react-native';

export default class Greeting extends Component {
  state = {
    newName: 'Jack',
    text: null,
  };

  componentDidMount() {
    return fetch('http://smart.btfxm.com/api/inspectionType/list', {
      method: 'GET',
      headers: {
        authorization:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOjEsImF1ZCI6MywiY29kZSI6IkJURiIsIm9wZW5pZCI6IiIsImV4cCI6MTU3OTE0NTA0MjcyNywiaWF0IjoxNTc5MDU4NjQyfQ.PWIXu_O6qjOF3bQoav-nXONVdKWVdioiKXlNHBpNGvI',
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
      })
      .catch(error => {
        console.error(error);
      });
  }

  twoClick = () => {
    console.log(111);
    this.setState({
      newName: '111',
    });
  };

  textInputChange = value => {
    console.log(value);
    // this.setState({
    //     text: value
    // });
  };

  onPressButton = () => {
    Alert.alert('You tapped the button!');
  };

  render() {
    const {name} = this.props;
    const {newName, text} = this.state;
    return (
      <View>
        <View style={style.name}>
          <Text>One: Hello {name}!</Text>
        </View>
        <View style={style.name} onPress={this.twoClick}>
          <Text>Two: Hello {newName}!</Text>
        </View>
        <View>
          <TextInput
            placeholder="Type here to translate!"
            onChangeText={this.textInputChange}
            value={text}
          />
        </View>
        <View>
          <Button onPress={this.onPressButton} title="Press Me" />
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  name: {
    alignItems: 'center',
    marginTop: 20,
  },
});
